<template>
  <x-fixed v-if="orderList && orderList.length > 0" :fixed="detail.templateType === 15" :interval="navigationHeight">
    <view class="h-order-swiper">
      <swiper
        class="_swiper"
        :circular="true"
        :autoplay="false"
        @touchend.stop
      >
        <swiper-item
          style="padding: 6px 2px;"
          v-for="(item, index) in orderList"
          :key="index"
          @click="onOrderList"
        >
          <view class="_item">
            <view class="_header">
              <view class="_dt">{{ item.orderContent }}</view>
              <view class="_dd">
                <text>查看更多</text>
                <x-icon name="icon-017" size="32" color="#999999"/>
              </view>
            </view>
            <view class="_info">
              <view class="_pic">
                <x-image :src="item.productImgUrl"/>
              </view>
              <view class="_dl">
                <view class="p1 line-clamp-1">
                  {{ item.productTitle }}
                </view>
                <view class="p2">
                  <view class="_spec line-clamp-1"><text v-if="item.comboName">套餐:{{item.comboName}}</text>{{ item.productSku || ''}}</view>
                  <view class="_price">¥{{item.totalPay}}</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </x-fixed>
</template>

<script>
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';
import XFixed from '@/components/x-fixed';
export default {
  name: 'HOrderSwiper',
  components: { XFixed, XImage, XIcon },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    navigationHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      orderList: []
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.$http({
        url: '/order/order/recently/list'
      }).then(res => {
        const orderContent = ['待付款', '待发货', '已发货', '已完成', '已关闭'];
        res.data.map((item) => {
          // 订单状态：0-待付款；1-待发货；2-已发货；3-已完成；4-已关闭；
          item.orderContent = orderContent[item.orderStatus];
        });
        this.orderList = res.data || [];
      }).catch(() => {

      });
    },
    onOrderList() {
      uni.navigateTo({
        url: '/packages/order/list/index'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.h-order-swiper{
  padding: 16px 20px;
  ._swiper{
    height: 230px;
    width: 100%;
  }
  ._item{
    background-color: #fff;
    box-shadow: 0 -4px 4px #cdcdcd40, 0 6px 10px #c4c4c466;
    border-radius: 10px;
    padding: 24px;
    ._header{
      display: flex;
      align-items: center;
      justify-content: center;
      ._dt{
        flex: 1;
        font-size: 30px;
        color: #151515;
      }
      ._dd{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: $uni-color-info;
      }
    }
    ._info{
      margin-top: 16px;
      display: flex;
      ._pic{
        flex-shrink: 1;
        width: 100px;
        height: 100px;
        border-radius: 6px;
        overflow: hidden;
      }
      ._dl{
        flex: 1;
        margin-left: 16px;
        .p1{
          font-size: 28px;
          color: $uni-color-default;
          margin-bottom: 16px;
        }
        .p2{
          display: flex;
          font-size: 26px;
          color: $uni-color-info;
          align-items: center;
          ._spec{
            width: 360px;
          }
          ._price{
            flex: 1;
            flex-shrink: 1;
            text-align: right;
          }
        }
      }
    }
  }
}
</style>
